How to Style React components
In the previous lesson, we have created a React component that displays a recipe of Taco Slaw with an image. Let’s review its file structure to understand where we need to put our CSS file(s).
For the sake of simplicity, we will create a file ‘style.css’ in the root directory. You can create a separate folder to hold all your style sheet files.
Open the style.css and copy-paste the following code.
.box{ border:1px solid #ccc; padding:20px; margin:20px; width:500px; font-family:'arial'; color:grey; -webkit-box-shadow: 1px 3px 14px 4px rgba(163,160,163,1); -moz-box-shadow: 1px 3px 14px 4px rgba(163,160,163,1); box-shadow: 1px 3px 14px 4px rgba(163,160,163,1); }
Import the Style Sheet
To import stylesheet file into MyApp.js add:
import style from '../style.css'
The third and last step is to add a class box to the container <div>
function MyApp() { return ( <div class = "box"> // your component’s code goes here. </div> ) } export default MyApp
This will work but will show an error in the web browser’s console area.
The <div class="box">
may look like an HTML but it is JSX – an extension of JavaScript. Class is a reserved keyword in JavaScript, which makes it forbidden to use for styling purpose.
React 15 will warns and ignores the use of class keyword for styling. React 16 warns but converts the value to a string.
Facebook recommends using className instead of class.
<div className="box">
React is using JSX but the truth is, underneath it is using the vanilla Javascript DOM API. If you have ever used Javascript DOM API, you must be familiar with something like
document.getElementById('div_id').className + = "new-class-name"
className
is an underline Javascript DOM API property. So, whenever you have to use class in the JSX element, use className instead.
Inline CSS in React
The second method you can use to style your components is by using the inline CSS. You can write the CSS rules as attributes and passed to elements.
In React, inline styles are not treated as strings. Instead, the style attribute accepts a JavaScript object. You can create a variable to store the style properties and then pass it to the JSX element, or you can pass it directly.
Let’s say; you want to change the color of the heading. Declare a variable redheading that stores the CSS style rule.
const redheading={color:'red'}
<h2 style={redheading}> Taco Slaw </h2>
This may seem like an easy way to change the style, but again, the first convention of programming suggests to keep everything separate.
The above piece of code is similar to:
<h2 style={ { color:'red' } }> Taco Slaw </h2>
Use inline CSS only when you are sure about what you are doing. Now, putting all things together, we will have the following code for App.js
import React, { Component } from 'react' import image01 from '../tacoslaw.jpg' import style from '../style.css' const redheading = { color: 'red' } function MyApp() { return ( <div className = "box" <h2 style = { redheading } >Taco Slaw</h2> <img src = { image01 }/> <h4>Ingredients</h4> <ol> <li> 1 / 2 small head cabbage, chopped </li> <li> 1 jalapeno pepper, seeded and minced </li> <li> 1 / 2 red onion, minced</li> <li> 1 carrot, chopped </li> <li> 1 tablespoon chopped fresh cilantro </li> <li> 1 lime, juiced</li> </ol> <h4 > Directions</h4> <p> In a bowl, mix together the cabbage, jalapeno pepper, red onion, carrot, cilantro, and lime juice. </p> </div> ) } export default MyApp
Try to change the color of the sub-heading, or style list, using the inline CSS, external style sheet as well to see what works best for you.
React Components Import & Export | Tutorial Home | React Nested Components |
Comments